<template>
  <div class="mv">
	  <div class="mv-title">
		  <h5>最新MV</h5>
		  <div v-for="(item,index) in area" :key="index"
		  :class="index===currentIndex?'active':''"
		  @click="areaHandle(index,item)">{{item}}</div>
	  </div>
	  <mv-list :mvList="firstMvList"></mv-list>
	   <h5>推荐MV</h5>
	   <mv-list :mvList="personalizedMvList"></mv-list>
	   <div class="mv-title">
	   		  <h5>MV排行榜</h5>
	   		  <div v-for="(item,index) in area" :key="index"
	   		  :class="index===currentPersonalizeIndex?'active':''"
	   		  @click="personalizeHandle(index,item)">{{item}}</div>
			  <i class="el-icon-arrow-right" @click="allMvHandle"></i>
	   </div>
	   <personalize-list :topMvList="topMvList"></personalize-list>
  </div>
</template>

<script>
import {_getTopMv,_getPersonalizedMv,_getFirstMv} from "network/mv.js"
import MvList from "components/content/mv-list/mv-list.vue"
import PersonalizeList from "./childPage/PersonalizeList.vue"
const  area=['内地','港台','欧美','日本','韩国']
export default {
  name:'Mv',
  components:{MvList,PersonalizeList},
  data(){
    return{
     area,
	 paramsmv:{
		 area:null,
		 limit:30,
		 offset:1
	 },
	 topMvList:[],
	 firstMvList:[],
	 personalizedMvList:[],
	 currentIndex:-1,
	 currentPersonalizeIndex:-1,
	 permission:[],
    }
  },
  created(){
	  this.getList()
  },
  methods:{
     getList(){
	 this.getPersonalizedMv();
	 this.getFirstMv();
	 this.getTopMv();
	 this.getPermission()
	 
    },
	getPersonalizedMv(){
		_getPersonalizedMv().then(res=>{
				  this.personalizedMvList = res.data.result.splice(0,5)
		})
	},
	getFirstMv(){
		_getFirstMv(this.paramsmv).then(res=>{
				  this.firstMvList = res.data.data.splice(0,10)
		})
	},
	getTopMv(){
		this.paramsmv.limit = 10
		console.log(this.paramsmv)
		_getTopMv(this.paramsmv).then(res=>{
			this.topMvList = res.data.data
		})
	},
	getPermission(){
		this.permission = this.$store.state.user.permission;
	},
	areaHandle(index,val){
		this.currentIndex = index;
		this.paramsmv.area= val;
		this.getFirstMv()
	},
	personalizeHandle(index,val){
		this.currentPersonalizeIndex = index;
		this.paramsmv.area= val;
		this.getTopMv();
		// this.getPersonalizedMv()
	},
	allMvHandle(){
		this.$router.push({
		    path: "/allMv",
		});
	}
  }
}
</script>

<style lang="less" scoped>
.mv{
	padding: 20px 70px;
	.mv-title{
		display: flex;
		position: relative;
		div{
			width: 60px;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
		
	}
}
h5{
	height: 30px;
	line-height: 30px;
	width: 80px;
  }
  .active{
	  color: #0C73C2;
  }
  .el-icon-arrow-right {
	  position: absolute;
	  right: 0;
	  top: 10px;
	  font-size: 20px;
  }
</style>